<template>
	<view class="">
		<scroll-view enable-back-to-top scroll-y class="viewport" id="scroller" @scrolltolower="onScrolltolower">

			<!-- 配送状态 -->
			<view class="shipment">
				<!-- 订单物流信息 -->
				<!-- <view class="item">
					<view class="message">
						fsef
					</view>
					<view class="date"> awdwad</view>
				</view> -->
				<!-- 用户收货地址 -->
				<view class="locate">
					<view class="user">{{address.address_name}}---{{address.phone}} </view>
					<view class="address">{{address.address_txt}}</view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="goods">
				<view class="item">
					<navigator class="navigator" v-for="item in order" :key="item.shopping_cart_id"
						:url="`/pages/goods/goods?id=${item.goodsId}`" hover-class="none">
						<image class="cover" :src="item.goodsImage"></image>
						<view class="meta">
							<view class="name ellipsis">{{ item.goodsName }}</view>
							<view class="type">{{ item.goodsArticle }}</view>
							<view class="price">
								<view class="actual">
									<text class="symbol">¥</text>
									<text>{{ item.goodsPrice }}</text>
								</view>
							</view>
							<view class="quantity">x{{ item.goodsCount }}</view>
						</view>
					</navigator>
					<!-- 待评价状态:展示按钮 -->
					<view class="action">
						<view class="button primary">申请售后</view>
						<navigator url="" class="button"> 去评价 </navigator>
					</view>
				</view>
				<!-- 合计 -->
				<view class="total">
					<view class="row">
						<view class="text">商品总价: </view>
						<view class="symbol">{{get_total_money }}</view>
					</view>
					<view class="row">
						<view class="text">运费: </view>
						<view class="symbol">0</view>
					</view>
					<view class="row">
						<view class="text">应付金额: </view>
						<view class="symbol primary">{{get_total_money }}</view>
					</view>
				</view>
			</view>

			<view class="payment">
				<uni-list>
					<radio-group @change="pay_ment">
						<label for="">
							<uni-list-item title="支付宝" thumb="/static/images/支付宝.png" thumb-size="lg">
								<template v-slot:footer>
									<radio value="支付宝" checked />
								</template>
							</uni-list-item>
						</label>

						<label for="">
							<uni-list-item title="微信" thumb="/static/images/微信.png" thumb-size="lg">
								<template v-slot:footer>
									<radio value="微信" />
								</template>
							</uni-list-item>
						</label>
					</radio-group>
				</uni-list>
			</view>

			<view class="detail">
				<view class="title">订单信息</view>
				<view class="row">
					<view class="item">
						订单编号: {{ order_number}} <text class="copy" @tap="onCopy(query.id)">复制</text>
					</view>
					<view class="item">下单时间: {{order_data }}</view>
				</view>
			</view>

			<!-- 底部操作栏 -->
			<!-- <view class="toolbar-height" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view> -->
			<view class="toolbar">
				<!-- 待付款状态:展示支付按钮 -->
				<view class="right">
					<view class="button " @click="toPay()"> 去支付 </view>
					<view class="button primary" @tap="Cancel_Payment"> 取消订单 </view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		onLoad(option) {
			try {
				this.content = JSON.parse(option.content)
			} catch (error) {
				console.error('JSON 解析失败:', error);
			}

			this.address = this.content.address
			this.order = this.content.order
			this.order_number = Date.now();
			this.getData()
		},
		data() {
			return {
				content: {},
				address: {},
				order: [],
				order_number: '', //订单编号
				order_data: '', //下单日期
				payment: '', //支付方式
			}
		},
		methods: {
			pay_ment(e) {
				// console.log(e.detail.value)
				this.payment = e.detail.value
			},
			getData() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				this.order_data = `${year}-${month}-${day}`;
			},
			toPay() {
				uni.request({
					url: 'http://localhost:3000/users/order_pay',
					method: 'post',
					data: {
						address: this.address,
						goods: this.order,
						order_data: this.order_data,
						order_number: this.order_number,
						userId: this.user.userId,
					},
					success: (res) => {
						uni.showToast({
							icon: 'success',
							title: '支付成功',
							duration: 500
						});
						console.log("res:", res)
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/mall/mall'
							})
						}, 500)
					}
				});

			},
			Cancel_Payment() {
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.reLaunch({
								url: '/pages/mall/mall'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		computed: {
			...mapState('user', ['user']),
			get_total_money() {
				return this.order.reduce((sum, item) => sum + item.goodsPrice * item.goodsCount, 0);
			},
		},
	}
</script>


<style lang="scss">
	@import "./pay_order.scss";
</style>